<!--
 * @Author: hq
 * @Date: 2022-08-18 15:14:28
 * @LastEditors: hq
 * @LastEditTime: 2022-08-18 18:34:51
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="省市区类型：" prop="type">
            <el-select
              clearable
              v-model="ruleForm.type"
              placeholder="请选择"
              @change="handleChange"
            >
              <el-option
                v-for="item in typeArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省市区：" prop="selectedOptions">
            <el-cascader
              :show-all-levels="false"
              placeholder="请选择省市区"
              :options="options"
              :props="props"
              v-model="ruleForm.selectedOptions"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="商家id：" prop="merchatId">
            <el-input
              v-model="ruleForm.merchatId"
              placeholder="请输入商家id"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { region, addRegion } from "@/api/merchant";
export default {
  data() {
    return {
      typeArr: [
        {
          id: 1,
          name: "省级",
        },
        {
          id: 2,
          name: "市级",
        },
        { id: 3, name: "区级" },
      ],
      options: [],
      props: {
        multiple: true,
        value: "code",
        label: "name",
        children: "child",
      },
      ruleForm: {
        type: 1,
        selectedOptions: [],
        merchatId: "",
      },
      rules: {
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
        merchatId: [
          { required: true, message: "请输入商户id", trigger: "blur" },
        ],
        selectedOptions: [
          { required: true, message: "请选择省市区", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    async region() {
      const { data, err } = await region({
        type: this.ruleForm.type,
      });
      if (err === 0) {
        this.options = data;
      }
    },
    async addRegion() {
      let newArr = [];
      this.ruleForm.selectedOptions.forEach((item) => {
        if (this.ruleForm.type === 1) {
          newArr.push(item[0]);
        } else if (this.ruleForm.type === 2) {
          newArr.push(item[1]);
        } else if (this.ruleForm.type === 3) {
          newArr.push(item[2]);
        }
      });
      const { msg, err } = await addRegion({
        mch: this.ruleForm.merchatId,
        aid: newArr.join(","),
        type: this.ruleForm.type,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    //select改变
    handleChange() {
      this.region();
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.addRegion();
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.region();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.el-select {
  width: 100%;
}
.el-cascader {
  width: 100%;
}
</style>
<style>
.el-cascader-node__label {
  font-size: 13px !important;
}
</style>
